<template>
    <div class="body">
        <div class="pageClose">
            <div @click="router.back()">关闭</div>
        </div>
        <div class="boxContent">
            <div class="boxLeft">
                <div class="orderBox">
                    <div class="tableTop">
                        <div style="font-size: 20px; font-weight: bold;">桌台：{{ OrderDetail.roomName }}</div>
                        <div>需补差额：<span style="color: #FF3333;">¥ {{ formatDecimal(goodsTotalData.totlePrice) }}</span>
                        </div>
                    </div>
                    <div class="orderDetails">
                        <div class="goodsTop">
                            <div style="width: 40%; text-align: left;">商品名称</div>
                            <div style="width: 15%;">数量</div>
                            <div style="width: 15%;">单价</div>
                            <div style="width: 20%;">收款金额</div>
                            <div style="width: 10%;">操作</div>
                        </div>
                        <div class="goodsList">
                            <div class="goodsItem" v-for="(item, index) in OrderDetail.consumeList" :key="index">
                                <div style="width: 40%; text-align: left;">{{ item.goodsName }}</div>
                                <div style="width: 15%;">{{ item.goodsQty }}</div>
                                <div style="width: 15%;">{{ item.salePrice }}</div>
                                <div style="width: 20%;">{{ item.payAmt }}</div>
                                <div style="width: 10%; color: #00AAFF; cursor: pointer;"
                                    @click="replaceDishes(item, index)">换菜</div>
                            </div>
                        </div>
                        <div class="totalAmt">已点商品：¥ {{ OrderDetail.totalAmt }}</div>
                    </div>
                    <div class="orderDetails">
                        <div class="goodsTop">
                            <div style="width: 50%; text-align: left;">商品名称</div>
                            <div style="width: 15%;">数量</div>
                            <div style="width: 15%;">单价</div>
                            <div style="width: 20%;">金额</div>
                        </div>
                        <div class="goodsList">
                            <div class="goodsItem" v-for="(item, index) in menuGoodsList" :key="index"
                                :class="{ MenuItemActive: index == isMenuItemActive, isNew: item.isNew == '0' }"
                                @click="editItem(item, index)">
                                <div style="width: 50%; text-align: left;">{{ item.goodsName }}</div>
                                <div style="width: 15%;"><span v-if="item.isNew == '0'">-</span>{{ item.goodsQty }}</div>
                                <div style="width: 15%;">{{ item.salePrice }}</div>
                                <div style="width: 20%;"><span v-if="item.isNew == '0'">-</span>{{ item.isNew == '0' ?
                                    item.payAmt : item.salePrice * item.goodsQty }}</div>
                            </div>
                        </div>
                        <div class="totalAmt">已换商品：¥ {{ formatDecimal(goodsTotalData.totlePrice) }}</div>
                    </div>
                    <!-- <div class="orderDetails">
                <div class="tableTop">桌台：A01</div>
                <div class="tableInfo">
                    <div>已点：<span style="color: #FF6A00;">{{ goodsTotalData.totalCount }}项</span></div>
                    <div>合计：<span style="color: #FF6A00;">¥<span style="font-size: 22px;">{{ goodsTotalData.totlePrice }}</span></span></div>
                </div>

                <div class="MenuTitle">
                    <div>商品</div>
                    <div>价格</div>
                    <div>数量</div>
                </div>

                <div v-if="menuGoodsList.length == '0'">在右侧添加商品</div>
                <div style="margin-right: -17px; overflow-x: hidden;">
                    <div class="MenuList">
                        <div class="MenuItem" v-for="(item,index) in menuGoodsList" :key="index" :class="{ MenuItemActive: index == isMenuItemActive }" @click="editItem(item,index)">
                            <div class="goodsTitle">
                                <div class="name"><span>{{ item.groupTypeName }}</span>{{ item.goodsName }}</div>
                                <div class="price">¥ {{ item.salePrice * item.count }}</div>
                                <div class="count">{{ item.count }}</div>
                            </div>
                            <div class="goodsTaste" v-if="item.flavors">{{ item.flavors.toString() }}</div>
                            <div v-for="(i,s) in item.priceList" :key="s">
                                <div class="goodsMinutia">
                                    <div class="dot"></div>
                                    <div class="typ">{{ i.goodsName + '（' + i.uomName + '）' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="orderPage">
                    <div>上一页</div>
                    <div>下一页</div>
                </div>
                </div> -->

                    <div class="orderCheckout">
                        <div v-if="route.query.state == '1'" @click="placeOrder()"
                            style="background-color: #FF3333; color: #FFFFFF;">下单</div>
                        <div v-if="route.query.state == '2'" @click="handlePayment()"
                            style="background-color: #FFE566; color: #212121;">结账</div>
                    </div>
                    <!-- <div>获取已点商品列表单号{{ orderBatchCode }}</div> -->
                </div>

                <div class="menuOperation">
                    <div @click="countAdd()">数量<img
                            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/add.png" alt=""></div>
                    <div @click="countSubtract()">数量<img
                            src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/subtract.png" alt=""></div>
                    <div @click="editCount()">修改数量</div>
                    <div @click="delGoods()">删除商品</div>
                    <!-- <div @click="flavorsShow()">选择口味</div> -->
                    <!-- <div @click="menuGoodsList[isMenuItemActive].flavor = ''">删除口味</div> -->
                    <div @click="removeGoods()">清空商品</div>
                    <!-- <div @click="remarkModal()">整单备注</div> -->
                    <!-- <div>叫起</div> -->
                    <!-- <div>{{ priceList.priceList }}</div> -->
                </div>
            </div>

            <div class="boxRight">
                <div class="goodsBox">
                    <div class="goodsLeft">
                        <div class="menuScroll">
                            <div class="goodsMenu">
                                <!-- <div :class="{ TypeActive: isTypeActive == '-1' }" @click="changeType('', '-1')">全部</div> -->
                                <div v-for="(item, index) in GoodsTypeList" :key="index"
                                    :class="{ TypeActive: index == isTypeActive }" @click="changeType(item, index)">{{
                                        item.goodsTypeName }}</div>
                            </div>
                        </div>
                        <div class="sCodeSearch">
                            <div class="SearchBtn" @click="keyPressShow = true">按简码搜索</div>
                            <div class="SearchPanel" v-if="keyPressShow">
                                <div class="SearchHead">
                                    <div class="SearchBar">
                                        <div>{{ goodsCode }}</div>
                                        <span @click="SearchBtn()">搜索</span>
                                    </div>
                                    <img src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/close.png"
                                        style="cursor: pointer;" @click="keyPressShow = false">
                                </div>
                                <div class="SearchKey">
                                    <div v-for="(item, index) in keyboard" :key="index" @click="keyPress(item)">{{ item }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="goodsRight">
                        <div class="goodsItem" v-for="(item, index) in GoodsList" :key="index" @click="addGoods(item)">
                            <div class="goodsLogoS">
                                <!-- <img class="img-jinbi" src="https://oss.jtmckj.com/wmp/qnjg/center/icon_jinbi.png" alt=""> -->
                                <img v-if="item.mainAttachment" :src="item.mainAttachment" class="goodsLogo">
                                <img v-else :src="PCMaterialPic" class="goodsLogo">
                                <!-- <div class="goodsVipPrice">会员价:￥{{ item.vipPrice }}</div> -->
                            </div>
                            <div class="goodsName">{{ item.goodsName }}</div>
                            <div class="goodsPrice">￥{{ item.price }}</div>
                        </div>
                        <div class="goodsPage">
                            <div @click="PageUp()" :class="{ disbPages: disbPageUp == true }">上一页</div>
                            <div @click="PageDown()" :class="{ disbPages: disbPageDown == true }">下一页</div>
                        </div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                        <div class="goodsItem holde"></div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <el-dialog title="修改数量" v-model="digitaShow" width="22%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="digitalPanel">
                    <el-input v-model="tempNum" @input="oninput()"></el-input>
                    <div class="digitalNum">
                        <div class="numBtn" @click="oninput('1')">1</div>
                        <div class="numBtn" @click="oninput('2')">2</div>
                        <div class="numBtn" @click="oninput('3')">3</div>
                        <div class="numBtn" @click="delinput(tempNum)"><img
                                src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/pc/images/orderDishes/del.png"
                                style="width: 40px; height: auto;"></div>
                        <div class="numBtn" @click="oninput('4')">4</div>
                        <div class="numBtn" @click="oninput('5')">5</div>
                        <div class="numBtn" @click="oninput('6')">6</div>
                        <div class="numBtn" @click="removeinput()">删除</div>
                        <div class="numBtn" @click="oninput('7')">7</div>
                        <div class="numBtn" @click="oninput('8')">8</div>
                        <div class="numBtn" @click="oninput('9')">9</div>
                        <div class="numBtn" @click="oninput('0')">0</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="digitaShow = false">取 消</el-button>
                        <el-button @click="subNum()">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="选择口味" v-model="tasteShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="tasteContent">
                    <div class="tasteClass">
                        <div @click="changeFlavor('', '-1')" :class="{ FlavorActive: isFlavorActive == '-1' }">全部</div>
                        <div v-for="(item, index) in flavorList" :key="index" @click="changeFlavor(item, index)"
                            :class="{ FlavorActive: index == isFlavorActive }">{{ item.name }}</div>
                    </div>
                    <div class="tasteList">
                        <div class="tasteItem" v-for="(item, index) in flavorItemS" :key="index" @click="ChoseFlavor(item)"
                            :class="{ tasteActive: item.state }">{{ item.name }}</div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="tasteShow = false">取 消</el-button>
                        <el-button @click="subFlavor(thisGoodsFlavor)">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="整单备注" v-model="remarkShow" width="45%" destroy-on-close :show-close="false" center
                class="menuDialog">
                <div class="remarkContent">
                    <textarea cols="30" rows="10" placeholder="请输入口味备注" v-model="remark"></textarea>
                    <div @click="remark = ''">清除</div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="remarkShow = false">取 消</el-button>
                        <el-button @click="remarkShow = false, orderRemark = remark">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog v-model="packGoodsShow" width="63%" destroy-on-close :show-close="false" center class="packDialog">
                <div class="packContent">
                    <div class="packHead">
                        <div class="packName">{{ modalItemData.goodsName }}</div>
                        <!-- <div class="packPrice">￥<span>1000</span>.00</div> -->
                        <div class="packPrice">￥<span>{{ modalItemData.salePrice }}</span></div>
                    </div>
                    <div class="packBody">
                        <div class="packLeft">
                            <div class="packTip">套餐包含以下菜品</div>
                            <div class="packList">
                                <div class="packItem" v-for="(item, index) in modalItemData.priceList" :key="index"
                                    @click="chosePack(item.detail, modalItemData.goodsFlavor)">
                                    <div class="groupTop">
                                        <div class="groupName">{{ item.goodsName }}</div>
                                        <!-- <div class="groupCount">可选数量<span>2</span>，已选<span style="color: #FF6A00;">1</span></div> -->
                                    </div>
                                    <div class="groupbottom" v-for="(i, s) in item.detail" :key="s">
                                        <div class="groupGoods">
                                            <div class="goodsName">{{ i.goodsName }}</div>
                                            <div class="goodsCount">{{ i.state }}</div>
                                            <div class="goodsunit">{{ i.uomName }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="packRight">
                            <div class="allocationTip" v-if="PackDetail">套餐配置</div>
                            <div class="allocationList" v-if="PackDetail">
                                <div class="allocationItem" v-for="(item, index) in PackDetail" :key="index">{{
                                    item.goodsName }}</div>
                            </div>

                            <div class="allocationTaste" v-if="PackFlavor">
                                <div class="tasteTip">口味</div>
                                <div class="tasteList">
                                    <div v-for="(item, index) in PackFlavor" :key="index"
                                        :class="{ tasteActive: item.flavorState }"
                                        @click="item.flavorState = !item.flavorState">{{ item.flavorName }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="packGoodsShow = false">取 消</el-button>
                        <el-button @click="packAllSub(modalItemData, PackFlavor)">确 定</el-button>
                    </span>
                </template>
            </el-dialog>

            <el-dialog title="规格" v-model="priceShow" width="15%" destroy-on-close :show-close="false" center
                style="border-radius: 10px;">
                <div style="padding: 10px 0; text-align: center; cursor: pointer; background-color: #E6E6E6; margin-bottom: 10px; border-radius: 10px;"
                    v-for="(item, index) in priceTypes.priceList" :key="index" @click="priceIndex(index)">{{ item.goodsName
                        +
                        '（' + item.uomName + '）' }}</div>
                <template #footer>
                    <!-- <span class="dialog-footer">
            <el-button @click="priceShow = false">取 消</el-button>
            <el-button @click="console.log('11')"
                >确 定</el-button
            >
            </span> -->
                </template>
            </el-dialog>
        </div>

    </div>
</template>

<script setup>
import Api from '@/api'
import useConfigStore from '@/store/config'
import ls from "@/lib/ls";
import { object } from 'superstruct';
import { formatDecimal } from '@/utils/chenhao'
import { getLocalIPv4 } from "@/utils/getip.js";
const router = useRouter()
const PCMaterialPic = useConfigStore().shopInfo.PCMaterialPic
const route = useRoute()
const configStore = useConfigStore()
const digitaShow = ref(false)
const tasteShow = ref(false)
const remarkShow = ref(false)
const keyPressShow = ref(false)
const packGoodsShow = ref(false)
const tempNum = ref('')
const GoodsList = ref('')
const modalItemData = ref('')
const PackDetail = ref('')
const PackFlavor = ref('')
const menuGoodsList = ref([])
const orderRemark = ref('')
const isMenuItemActive = ref('0')
const isTypeActive = ref('0')
// const flavorList = ref(configStore.FlavorList)
// const flavorItem1 = ref([
//     ...configStore.FlavorItem1
// ])
// flavorItem1.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
// const flavorItem2 = ref([
//     ...configStore.FlavorItem2
// ])
// flavorItem2.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
// const flavorItem3 = ref([
//     ...configStore.FlavorItem3
// ])
// flavorItem3.value.map(e => {
//     let temp = { state: false }
//     Object.assign(e, temp)
// })
const flavorItemS = ref([])
const isFlavorActive = ref('-1')
const priceShow = ref(false)

//商品分类列表
const GoodsTypeList = ref('')
const GetGoodsTypeOrg = () => {
    GoodsTypeList.value = [
        { goodsTypeName: '客人损赔', damageType: '0' },
        { goodsTypeName: '员工损赔', damageType: '1' },
        { goodsTypeName: '自然损赔', damageType: '2' },
    ]
    return
    Api.Common.PcObjProcess.Do({ "functionName": "GetGoodsTypeOrg", "orgCode": "0004", "contentData": "" })
        .then(res => {
            console.log(res)
            GoodsTypeList.value = res.result
        })
}
const changeType = (item, index) => {
    if (index == isTypeActive.value) {
        return
    } else {
        isTypeActive.value = index
        let typeCode = ''
        if (item) {
            typeCode = item.goodsTypeCode
        } else {
            typeCode = ''
        }
        GoodsList.value = ''
        goodsInfoPar.value = { pageIndex: 1, pageSize: 14, shortName: "", goodsType: typeCode }
        getGoodsInfo()
    }
}

//获取商品列表
const goodsInfoPar = ref({ pageIndex: 1, pageSize: 14, shortName: "" })
const getGoodsInfo = () => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDamageGoodsList", "contentData": goodsInfoPar.value })
        .then(res => {
            console.log('获取商品列表 res :>> ', res);
            isPageBtn(goodsInfoPar, res.totalCount)
            // return
            GoodsList.value = res.data
            if (res.data.length > 0) {
                GoodsList.value = res.data
            } else {
                goodsInfoPar.value.pageIndex--
            }
        })
}
//翻页按钮是否显示
const disbPageUp = ref(false)
const disbPageDown = ref(false)
const isPageBtn = (goodsInfoPar, totalCount) => {
    console.log(goodsInfoPar, totalCount)
    let num1 = totalCount;
    let num2 = goodsInfoPar.value.pageSize;
    let quotient = '';
    if (num1 % num2 == 0) {
        quotient = parseInt(num1 / num2)
    } else {
        quotient = parseInt(num1 / num2) + 1
    }
    if (goodsInfoPar.value.pageIndex <= 1) {
        disbPageUp.value = true
    } else { disbPageUp.value = false }
    if (goodsInfoPar.value.pageIndex >= quotient) {
        disbPageDown.value = true
    } else { disbPageDown.value = false }
}
//上下页
const PageUp = () => {
    if (goodsInfoPar.value.pageIndex > '1') {
        goodsInfoPar.value.pageIndex--
        getGoodsInfo()
    }
}
const PageDown = () => {
    goodsInfoPar.value.pageIndex++
    getGoodsInfo()
}
const addGoods = (i) => {
    console.log('i', i)
    isMenuItemActive.value = '0'
    // if (i.goodsType == '000400') {
    //     packModalShow(i)
    // } else {
    // if (i.priceList.length > 1) {
    // priceType(i)
    // let temp = {count: '1'}
    // Object.assign(i,temp)
    // menuGoodsList.value.unshift(JSON.parse(JSON.stringify(i)))
    // goodsTotal()
    // } else {
    let detail = {
        ...i,
        isNew: "1",
        flavor: "",
        salePrice: i.price,
        goodsQty: "1",
        // payAmt: i.priceList[0].payAmt,
    }
    menuGoodsList.value.unshift(detail)
    let top = []
    let down = []
    menuGoodsList.value.map(e => {
        if (e.isNew == '0') {
            top.push(e)
        } else {
            down.push(e)
        }
    })
    menuGoodsList.value = []
    menuGoodsList.value.push(...top)
    menuGoodsList.value.push(...down)
    goodsTotal()
    // }
    // }
}
const priceTypes = ref([])
const priceType = (i) => {
    priceShow.value = true
    priceTypes.value = i
    priceTypes.value = JSON.parse(JSON.stringify(priceTypes.value))
    console.log(i.priceList)
}
const priceIndex = (index) => {
    priceShow.value = false
    let a = priceTypes.value.priceList[index]
    // console.log('a :>> ', a);
    priceTypes.value.priceList = []
    priceTypes.value.priceList.push(a)
    let temp = { goodsQty: '1' }
    Object.assign(priceTypes.value, temp)
    menuGoodsList.value.unshift(JSON.parse(JSON.stringify(priceTypes.value)))
    let top = []
    let down = []
    menuGoodsList.value.map(e => {
        // console.log('e :>> ', e);
        if (e.isNew == '0') {
            top.push(e)
        } else {
            e.isNew = '1'
            down.push(e)
        }
    })
    menuGoodsList.value = []
    menuGoodsList.value.push(...top)
    menuGoodsList.value.push(...down)
    goodsTotal()
    console.log(menuGoodsList.value)
}
const editItem = (i, s) => {
    console.log(i, s)
    isMenuItemActive.value = s;
}
const packModalShow = (i) => {
    console.log(i)
    PackFlavor.value = ''
    packGoodsShow.value = true
    modalItemData.value = i
    chosePack(modalItemData.value.priceList[0].detail, modalItemData.value.goodsFlavor)
}
// 选择套餐
const chosePack = (detail, flavor) => {
    PackDetail.value = detail
    if (flavor) {
        let newFlavor = JSON.parse(flavor)[0].FlavorStr.split(',')
        let tempList = []
        for (let i = 0; i < newFlavor.length; i++) {
            let tempData = { flavorName: '', flavorState: false }
            tempData.flavorName = newFlavor[i]
            tempList.push(tempData)
        }
        PackFlavor.value = tempList
        console.log(PackFlavor.value)
    }
}
// 套餐提交
const packAllSub = (item, flavor) => {
    packGoodsShow.value = false
    let temp = { count: '1', flavor: [] }
    if (flavor) {
        flavor.map(e => {
            if (e.flavorState == true) {
                temp.flavor.push(e.flavorName)
            }
        })
    }
    let i = Object.assign(item, temp)
    let detail = {
        isNew: "1",
        itemCode: i.priceList[0].itemCode,
        goodsCode: i.priceList[0].goodsCode,
        goodsName: i.priceList[0].goodsName,
        uomCode: i.priceList[0].uomCode,
        uomName: i.priceList[0].uomName,
        flavor: "",
        salePrice: i.priceList[0].salePrice,
        goodsQty: "1",
        vipPrice: i.priceList[0].vipPrice,
        payAmt: i.priceList[0].payAmt,
    }
    menuGoodsList.value.unshift(detail)
    let top = []
    let down = []
    menuGoodsList.value.map(e => {
        if (e.isNew == '0') {
            top.push(e)
        } else {
            down.push(e)
        }
    })
    menuGoodsList.value = []
    menuGoodsList.value.push(...top)
    menuGoodsList.value.push(...down)
    goodsTotal()
}
//数量加减
const countAdd = () => {
    if (menuGoodsList.value[isMenuItemActive.value].isNew == 0) {
        alert('旧商品无法修改数量')
    } else {
        if (menuGoodsList.value[isMenuItemActive.value].goodsQty >= 999) {
            alert('超出最大数量')
        } else {
            menuGoodsList.value[isMenuItemActive.value].goodsQty++
        }
        goodsTotal()
    }
}
const countSubtract = () => {
    if (menuGoodsList.value[isMenuItemActive.value].isNew == 0) {
        alert('旧商品无法修改数量')
        //旧商品减方法
        // let temp = false
        // if(menuGoodsList.value[isMenuItemActive.value].goodsQty == '1'){
        //     OrderDetail.value.consumeList.map(e=>{
        //         if(e.locate == menuGoodsList.value[isMenuItemActive.value].locate){
        //             console.log(e)
        //             e.goodsQty ++
        //             menuGoodsList.value.splice(isMenuItemActive.value, 1);
        //             temp = true
        //         }
        //     })
        //     if(temp == false){
        //         console.log(menuGoodsList.value[isMenuItemActive.value],'测试')
        //         OrderDetail.value.consumeList.push(menuGoodsList.value[isMenuItemActive.value])
        //         menuGoodsList.value.splice(isMenuItemActive.value, 1);
        //     }
        // }else{
        //     menuGoodsList.value[isMenuItemActive.value].goodsQty --
        //     OrderDetail.value.consumeList.push(menuGoodsList.value[isMenuItemActive.value])
        // }
    } else {
        if (menuGoodsList.value[isMenuItemActive.value].goodsQty <= 1) {
            alert('数量不能小于1')
        } else {
            menuGoodsList.value[isMenuItemActive.value].goodsQty--
        }
        goodsTotal()
    }
}
//打开数量输入器
const editCount = () => {
    if (menuGoodsList.value[isMenuItemActive.value]) {
        tempNum.value = menuGoodsList.value[isMenuItemActive.value].goodsQty
        digitaShow.value = true
    }
}
//修改数量
const oninput = (n) => {
    if (tempNum.value.toString().length < 3) {
        tempNum.value += n
    } else {
        alert('数值不能超出3位数')
    }
}
const delinput = (n) => {
    tempNum.value = n.slice(0, n.length - 1)
}
const removeinput = (n) => {
    tempNum.value = ''
}
const subNum = () => {
    digitaShow.value = false
    menuGoodsList.value[isMenuItemActive.value].goodsQty = tempNum.value
    goodsTotal()
}
//商品合计
const goodsTotalData = ref({
    totalCount: 0,
    totlePrice: 0,
    totleVipPrice: 0,
})
const goodsTotal = () => {
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0,
        totleVipPrice: 0,
    }
    menuGoodsList.value.map(e => {
        console.log('e :>> ', e);
        console.log('Number(e.vipPrice) * Number(e.goodsQty) :>> ', Number(e.vipPrice) * Number(e.goodsQty));
        if (e.isNew == '0') {
            goodsTotalData.value.totalCount -= Number(e.goodsQty)
            goodsTotalData.value.totlePrice -= Number(e.payAmt)
            goodsTotalData.value.totleVipPrice -= Number(e.payAmt)
        } else {
            goodsTotalData.value.totalCount += Number(e.goodsQty)
            goodsTotalData.value.totlePrice += Number(e.salePrice) * Number(e.goodsQty)
            goodsTotalData.value.totleVipPrice += Number(e.vipPrice) * Number(e.goodsQty)
        }
    })
    console.log('goodsTotalData.value :>> ', goodsTotalData.value);
}
//打开口味弹窗
const flavorsShow = () => {
    if (menuGoodsList.value.length != 0) {
        thisGoodsFlavor.value = []
        flavorItem1.value.map(e => { e.state = false })
        flavorItem2.value.map(e => { e.state = false })
        flavorItem3.value.map(e => { e.state = false })
        tasteShow.value = true
        flavorItemS.value = []
        flavorItemS.value.push(...flavorItem1.value)
        flavorItemS.value.push(...flavorItem2.value)
        flavorItemS.value.push(...flavorItem3.value)
    }
}
//选择口味组
const changeFlavor = (i, s) => {
    isFlavorActive.value = s
    if (i != '') {
        if (i.code == '577006') {
            flavorItemS.value = flavorItem1.value
        } else if (i.code == '577007') {
            flavorItemS.value = flavorItem2.value
        } else if (i.code == '577008') {
            flavorItemS.value = flavorItem3.value
        }
    } else {
        flavorItemS.value = []
        flavorItemS.value.push(...flavorItem1.value)
        flavorItemS.value.push(...flavorItem2.value)
        flavorItemS.value.push(...flavorItem3.value)
    }
}
//测试方法
const removeElement = (arr, value) => {
    return arr.filter(function (item) {
        return item !== value;
    });
}
//选择口味
const thisGoodsFlavor = ref([])
const ChoseFlavor = (item) => {
    // var arr = [1, 2, 3, 4, 5];
    // var newValue = 3;
    // arr = removeElement(arr, newValue);
    // console.log(arr); // [1, 2, 4, 5]
    // return
    item.state = !item.state
    if (item.state) {
        thisGoodsFlavor.value.push(item.name)
    } else {
        thisGoodsFlavor.value = removeElement(thisGoodsFlavor.value, item.name);
    }
    console.log(thisGoodsFlavor.value)
}
const subFlavor = (flavor) => {
    tasteShow.value = false
    menuGoodsList.value[isMenuItemActive.value].flavor = JSON.parse(JSON.stringify(flavor))
}
// menuGoodsList[isMenuItemActive].flavors
//删除商品
const delGoods = () => {
    if (menuGoodsList.value[isMenuItemActive.value].isNew == '0') {
        OrderDetail.value.totalAmt += menuGoodsList.value[isMenuItemActive.value].salePrice * menuGoodsList.value[isMenuItemActive.value].goodsQty
        OrderDetail.value.consumeList.push(menuGoodsList.value[isMenuItemActive.value])
        // let temp = false
        // OrderDetail.value.consumeList.map(e => {
        //     if(e.locate == menuGoodsList.value[isMenuItemActive.value].locate){
        //         temp = true
        //     }
        // })
    }
    menuGoodsList.value.splice(isMenuItemActive.value, 1);
    isMenuItemActive.value = '0'
    goodsTotal()
}
//清空商品
const removeGoods = () => {
    menuGoodsList.value.map(e => {
        if (e.isNew == '0') {
            OrderDetail.value.consumeList.push(e)
            OrderDetail.value.totalAmt += e.salePrice * e.goodsQty
        }
    })
    menuGoodsList.value = []
    goodsTotalData.value = {
        totalCount: 0,
        totlePrice: 0,
        vipPrice: 0,
    }
}
//整单备注
const remark = ref('')
const remarkModal = () => {
    remarkShow.value = true
    remark.value = orderRemark.value
}
//菜品简码输入框
const goodsCode = ref('请输入菜品简码')
//键盘
const keyboard = ref(
    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '空格', 'shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '清空']
)
const CapsLock = ref(false)
const keyPress = (key) => {
    //输入框
    if (key != 'shift' && key != 'SHIFT' && key != '空格' && key != '清空') {
        if (goodsCode.value == '请输入菜品简码') {
            goodsCode.value = ''
            goodsCode.value += key
        } else {
            goodsCode.value += key
        }
    }
    //空格
    if (key == '空格' && goodsCode.value != '请输入菜品简码') {
        goodsCode.value += ' '
    }
    //清空
    if (key == '清空') {
        goodsCode.value = '请输入菜品简码'
    }
    //大小写切换
    let Caps = ''
    if (key == 'shift' && !CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toUpperCase()
        keyboard.value = Caps.split(',')
    } else if (key == 'SHIFT' && CapsLock.value) {
        CapsLock.value = !CapsLock.value
        Caps = keyboard.value.toString().toLowerCase()
        keyboard.value = Caps.split(',')
    }
}
// 简码搜索按钮
const SearchBtn = () => {
    if (goodsCode.value != '请输入菜品简码') {
        GoodsList.value = ''
        goodsInfoPar.value = { pageIndex: 1, pageSize: 14, shortName: goodsCode.value }
        console.log(goodsInfoPar.value)
        getGoodsInfo()
    } else {
        goodsInfoPar.value = { pageIndex: 1, pageSize: 14, shortName: '' }
        getGoodsInfo()
    }
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });

//挂单
const placeOrder = () => {
    let hasOld = false
    let hasNew = false
    menuGoodsList.value.forEach(item => {
        if (item.isNew === '1') {
            hasNew = true
        } else {
            hasOld = true
        }
        item.isDamage = '1'
    })
    if (!hasOld) return ElNotification({
        title: '提示',
        message: '请选择需要更换的商品',
        type: 'warning',
    })
    if (!hasNew) return ElNotification({
        title: '提示',
        message: '请选择新商品',
        type: 'warning',
    })
    let consumeCode = ls.get("TABLE_INFO").consumeCode; // 消费单号
    // GetOrderDetail(consumeCode, route.query.state, route.query.payBatchCode)
    let contentData = {
        consumeCode: consumeCode,
        // orderBatchCode: '0004202405130001',
        // state: 1,
        detail: []
    }
    contentData.detail.push(...menuGoodsList.value)
    contentData = { ...contentData, ip: ip.value };
    Api.Common.PcObjProcess.Do({ functionName: "OpPayBatchChangeGoods", contentData })
        .then(res => {
            menuGoodsList.value = []
            ElNotification({
                title: '提示',
                message: '换菜挂单成功',
                type: 'success',
            })
            // router.back()
        })
}
//下单
// const orderBatchCode = ref('')
// const placeOrder = () => {
//     let details = {}
//     let contentData = {
//         consumeCode: "0004202402050006",
//         roomCode: "0004003",
//         remark: orderRemark.value,
//         operType: "",
//         detail: []
//     }
//     menuGoodsList.value.map(e => {
//         details = {
//             itemCode: "",
//             doType: "add",
//             indexStr: "1",
//             itemType: "",
//             goodsPriceCode: "",
//             goodsCode: "",
//             goodsName: "",
//             uomCode: "",
//             uomName: "",
//             flavor: "",
//             salePrice: "",
//             orderQty: "",
//             producePoint: "000403"
//         }
//         e.priceList.map(s => {
//             details.itemCode = s.itemCode
//             details.itemType = e.type
//             details.goodsCode = e.goodsCode
//             details.goodsName = e.goodsName
//             details.uomCode = s.uomCode
//             details.uomName = s.uomName
//             details.salePrice = s.salePrice
//             details.orderQty = e.goodsQty
//             if(e.flavor){
//                 details.flavor = e.flavor.toString()
//             }
//         })
//         contentData.detail.push(details)
//     })
//     // return
//     Api.Common.PcObjProcess.Do({functionName:"orderAdd",contentData})
//     .then(res=>{
//         console.log(res)
//         menuGoodsList.value = []
//         orderRemark.value = ''
//         remark.value = ''
//         orderBatchCode.value = res.orderBatchCode
//     })
// }
const OrderDetail = ref('')
const GetOrderDetail = (consumeCode, state, payBatchCode) => {
    let contentData = {
        consumeCode,
        state,
        payBatchCode
    }
    Api.Common.PcObjProcess.Do({ functionName: "GetPayBatchGoodsList", contentData })
        .then(res => {
            let orderDetails = res.result[0].consumeList
            OrderDetail.value = res.result[0]
            OrderDetail.value.consumeList = []
            console.log(OrderDetail.value)
            let locate = '0'
            let Amt = {
                totalAmt: 0
            }
            orderDetails.map(i => {
                let detail = {
                    locate: locate++,
                    isNew: "0",
                    itemCode: i.itemCode,
                    goodsCode: i.goodsCode,
                    goodsName: i.goodsName,
                    uomCode: i.uomCode,
                    uomName: i.uomName,
                    flavor: i.flavor,
                    salePrice: i.salePrice,
                    goodsQty: i.orderQty,
                    vipPrice: i.vipPrice,
                    payAmt: i.payAmt,
                }
                Amt.totalAmt += i.payAmt
                OrderDetail.value.consumeList.push(detail)
            })
            Object.assign(OrderDetail.value, Amt)
            console.log('orderDetails :>> ', orderDetails);
        })
}

//换菜
const replaceDishes = (i, s) => {
    OrderDetail.value.totalAmt -= i.payAmt
    menuGoodsList.value.unshift(i)
    let top = []
    let down = []
    menuGoodsList.value.map(e => {
        if (e.isNew == '0') {
            top.push(e)
        } else {
            down.push(e)
        }
    })
    menuGoodsList.value = []
    menuGoodsList.value.push(...top)
    menuGoodsList.value.push(...down)
    // console.log(OrderDetail.value.consumeList[s])
    OrderDetail.value.consumeList.splice(s, '1')
    goodsTotal()
}
//初始化
const onInit = async () => {
    GetGoodsTypeOrg()
    getGoodsInfo()
    let consumeCode = ls.get("TABLE_INFO").consumeCode; // 消费单号
    GetOrderDetail(consumeCode, route.query.state, route.query.payBatchCode)
}
onInit()

// -----------------换菜支付-------------------------
const handlePayment = (params) => {
    let hasOld = false
    let hasNew = false
    let oldItemCode = []
    let newItemCode = []
    menuGoodsList.value.forEach(item => {
        if (item.isNew === '1') {
            hasNew = true
            newItemCode.push(item.itemCode)
        } else {
            hasOld = true
            oldItemCode.push(item.itemCode)
        }
        item.isDamage = '1'
    })
    if (!hasOld) return ElNotification({
        title: '提示',
        message: '请选择需要更换的商品',
        type: 'warning',
    })
    if (!hasNew) return ElNotification({
        title: '提示',
        message: '请选择新商品',
        type: 'warning',
    })
    let consumeCode = ls.get("TABLE_INFO").consumeCode; // 消费单号
    // GetOrderDetail(consumeCode, route.query.state, route.query.payBatchCode)
    let contentData = {
        consumeCode: consumeCode,
        // orderBatchCode: '0004202405130001',
        // state: 1,
        detail: []
    }
    contentData.detail.push(...menuGoodsList.value)
    // 换菜的价格一样，无需退款或者付款
    if (goodsTotalData.value.totlePrice == 0 || route.query.state == '1') {
        ElMessageBox.confirm('是否确定换菜？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
        ).then(() => {
            contentData = { ...contentData, ip: ip.value };
            Api.Common.PcObjProcess.Do({ functionName: "OpPayBatchChangeGoods", contentData })
                .then(res => {
                    console.log('换菜res :>> ', res);
                    // let itemCodeList = res.newGoods.map(item => {
                    //     return item.itemCode
                    // })
                    ElNotification({
                        title: '提示',
                        message: '换菜成功',
                        type: 'success',
                    })
                    router.back()
                })
        })
    }
    else if (goodsTotalData.value.totlePrice > 0) {
        router.push({
            path: '/order/payment',
            query: {
                // itemCodeList: itemCodeList.join(','),
                contentData: JSON.stringify(contentData),
                oldItemCode: oldItemCode.join(','),
                price: goodsTotalData.value.totlePrice,
                vipPrice: goodsTotalData.value.totleVipPrice,
                consumeCode: ls.get("TABLE_INFO").consumeCode,
                roomCode: ls.get("TABLE_INFO").roomCode,
                payBatchCode: route.query.payBatchCode,
                todo: 'orderChange',
                loss: true,
            }
        })
    }
    else if (goodsTotalData.value.totlePrice < 0) {
        router.push({
            path: '/refund',
            query: {
                contentData: JSON.stringify(contentData),
                roomName: OrderDetail.value.roomName,
                returnGoodsPrice: Math.abs(Number(goodsTotalData.value.totlePrice)),
                consumeCode: ls.get("TABLE_INFO").consumeCode,
                // roomCode: res.roomCode,
                payBatchCode: route.query.payBatchCode,
                todo: 'orderChange'
            }
        })
    }

}

</script>
<style scoped lang="scss">
* {
    font-size: 16px;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE/Edge */
    user-select: none;
    /* 标准语法 */
}

.pageClose {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-top: 20px;
    padding-right: 80px;

    div {
        width: 120px;
        padding: 18px 0;
        border-radius: 10px;
        text-align: center;
        font-size: 18px;
        background-color: #CCCCCC;
        cursor: pointer;
    }
}

.body {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
    overflow-x: hidden;
}

.boxContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: calc(100% - 100vw);
    color: #212121;
    box-sizing: border-box;
    padding: 20px 100px;
    padding-top: 0;
}

.boxLeft {
    display: flex;
    align-items: flex-start;

    .orderBox {
        width: 570px;
        height: 800px;
        background-color: #fff;
        overflow: hidden;
        border-radius: 10px;

        .tableTop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
        }

        .orderDetails {
            // height: 375px;
            // overflow-y: auto;
            position: relative;

            .goodsTop {
                background-color: #E6E6E6;
                padding: 15px 20px;
                display: flex;

                div {
                    text-align: center;
                }
            }

            .goodsList {
                height: 270px;
                overflow-y: auto;

                .goodsItem {
                    padding: 10px 20px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    div {
                        text-align: center;
                    }
                }

                .isNew {
                    color: #FF3333;
                }

                .MenuItemActive {
                    background-color: #FFFBE5;
                }
            }

            .totalAmt {
                padding: 20px;
                font-size: 18px;
                position: absolute;
                left: 0;
                bottom: -55px;
                color: #FF6A00;
            }
        }

        .orderCheckout {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 35px;

            div {
                width: 30%;
                padding: 15px 0;
                border-radius: 10px;
                font-size: 18px;
                text-align: center;
                cursor: pointer;
                margin: 0 12px;
            }
        }
    }

    .menuOperation {
        background-color: #eee;
        border-radius: 10px;

        div {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFF6CC;
            font-size: 18px;
            padding: 0 15px;
            height: 60px;
            border-radius: 10px;
            margin: 11px;
            margin-bottom: 20px;

            img {
                width: 32px;
                height: 32px;
                margin-left: 7px;
            }
        }
    }
}

.boxRight {
    width: 1000px;



    .goodsBox {
        width: 100%;
        height: 840px;
        background-color: #ffffff;
        box-sizing: border-box;
        padding-top: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .goodsLeft {
            .menuScroll {
                width: 120px;
                border-radius: 10px;
                overflow: hidden;

                .goodsMenu {
                    width: 140px;
                    height: 720px;
                    background-color: #fff;
                    overflow-y: scroll;

                    div {
                        width: 120px;
                        padding: 18px 0;
                        font-size: 18px;
                        color: #666666;
                        text-align: center;
                        cursor: pointer;
                    }

                    .TypeActive {
                        background-color: #FFE566;
                        color: #212121;
                    }
                }
            }

            .sCodeSearch {
                position: relative;

                .SearchBtn {
                    width: 120px;
                    padding: 18px 0;
                    background-color: #FFD400;
                    margin-top: 20px;
                    border-radius: 10px;
                    font-size: 18px;
                    text-align: center;
                    cursor: pointer;
                }

                .SearchPanel {
                    background-color: #FFFFFF;
                    position: absolute;
                    right: -605px;
                    bottom: 1px;
                    border-radius: 10px;
                    overflow: hidden;
                    border: 1px solid #FFD400;
                    box-sizing: border-box;
                    padding: 20px;
                    z-index: 99;
                    width: 600px;

                    // height: 610px;
                    .SearchHead {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .SearchBar {
                            display: flex;
                            align-items: center;
                            border: 1px solid #FFD400;
                            box-sizing: border-box;
                            padding: 1px;
                            border-radius: 30px;
                            height: 48px;

                            div {
                                width: 400px;
                                color: #999999;
                                box-sizing: border-box;
                                padding-left: 20px;
                            }

                            span {
                                font-size: 18px;
                                background-color: #FFD400;
                                border-radius: 30px;
                                width: 82px;
                                height: 44px;
                                line-height: 44px;
                                text-align: center;
                                cursor: pointer;
                            }
                        }

                        img {
                            width: 40px;
                            height: 40px;
                        }
                    }

                    .SearchKey {
                        border: 1px solid #767676;
                        border-radius: 10px;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 20px;

                        div {
                            width: 10%;
                            height: 55px;
                            line-height: 55px;
                            text-align: center;
                            border: 1px solid #E1E1E1;
                            color: #161616;
                            font-size: 17px;
                            cursor: pointer;
                        }

                        div:last-child {
                            width: 20%;
                        }
                    }
                }
            }
        }

        .goodsRight {
            width: 862px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            .goodsItem {
                background-color: #f2f2f2;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 10px;
                margin-bottom: 11px;
                position: relative;
                cursor: pointer;

                .goodsLogoS {
                    position: relative;
                    border-radius: 5px;
                    // overflow: hidden;
                    margin-bottom: 4px;

                    .img-jinbi {
                        position: absolute;
                        width: 40px;
                        height: 20px;
                        right: -10px;
                        top: -10px;
                    }

                    .goodsLogo {
                        width: 140px;
                        height: 140px;
                        vertical-align: middle;
                    }

                    .goodsVipPrice {
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-color: rgba($color: #000000, $alpha: 0.5);
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        padding: 2px 0;
                    }
                }

                .goodsName {
                    width: 140px;
                    height: 44px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    line-height: 1.4;

                    span {
                        color: #fff;
                        background-color: #FF3333;
                        font-size: 14px;
                        padding: 0 4px;
                        border-radius: 5px;
                        margin-right: 5px;
                    }
                }

                .goodsPrice {
                    color: #FF3333;
                    font-size: 18px;
                }

                .coin {
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    background-color: #FF6A00;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 30px;
                    letter-spacing: 1px;
                    padding: 1px 5px;
                }
            }

            .holde {
                background-color: transparent;
                width: 160px;
                padding: 0;
                margin: 0;
            }

            .goodsPage {
                // background-color: #fff;
                // box-sizing: border-box;
                // padding: 10px;
                display: grid;
                grid-template-columns: auto;
                // grid-column-gap: 40px;
                grid-row-gap: 20px;
                margin-bottom: 11px;

                div {
                    width: 160px;
                    border-radius: 10px;
                    text-align: center;
                    padding: 39px 0;
                    background-color: #fff;
                    font-size: 22px;
                    cursor: pointer;
                }

                .disbPages {
                    pointer-events: none;
                    background-color: #c0bdbd;
                    color: #666;
                    cursor: not-allowed;
                    opacity: 0;
                }
            }
        }
    }
}

::v-deep(.menuDialog) {
    padding: 0;
    margin: 0;
    top: 190px;
    left: 620px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #FFD400;

    .el-dialog__header {
        background-color: #FFD400;
        padding: 16px 0;

        .el-dialog__title {
            font-size: 19px;
            font-weight: bold;
        }
    }
}

.digitalPanel {
    box-sizing: border-box;
    padding: 30px 20px;
    padding-bottom: 0;

    ::v-deep(.el-input) {
        height: 50px;
        margin-bottom: 30px;

        .el-input__wrapper {
            background-color: #F9F9F9;
            font-size: 18px;
        }

    }

    .digitalNum {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .numBtn {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #212121;
            font-size: 22px;
            background-color: #E6E6E6;
            margin-bottom: 20px;
            border-radius: 10px;
            cursor: pointer;
        }

        .numBtn:hover {
            background-color: #FF6A00;
            color: #fff;
        }
    }
}

.dialog-footer {
    display: block;
    padding-bottom: 30px;

    .el-button {
        width: 160px;
        height: 60px;
        font-size: 26px;
        border-color: #FF6A00;
        color: #FF6A00;
        border-radius: 10px;
    }

    .el-button:hover {
        background-color: #FF6A00;
        color: #fff;
    }

    .el-button+.el-button {
        margin-left: 30px;
    }
}

.tasteContent {
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    align-items: flex-start;
    height: 450px;

    .tasteClass {
        width: 15%;
        height: 100%;
        background-color: #FAFAFA;
        border-radius: 10px;
        overflow: hidden;

        div {
            text-align: center;
            font-size: 18px;
            color: #666;
            padding: 19px 0;
            cursor: pointer;
        }

        .FlavorActive {
            background-color: #FFE566;
            color: #212121;
        }
    }

    .tasteList {
        width: 85%;
        display: grid;
        box-sizing: border-box;
        padding-left: 20px;
        grid-template-columns: repeat(4, 23%);
        justify-content: space-between;
        grid-gap: 20px 0;

        .tasteItem {
            background-color: #E6E6E6;
            border-radius: 10px;
            text-align: center;
            font-size: 20px;
            padding: 19px 0;
            cursor: pointer;
        }

        .tasteActive {
            background-color: #FFE566;
            color: #212121;
        }
    }
}

.remarkContent {
    box-sizing: border-box;
    padding: 18px;
    position: relative;

    textarea {
        font-size: 18px;
        resize: none;
        width: 100%;
        background-color: #FAFAFA;
        box-sizing: border-box;
        padding: 18px 20px;
    }

    div {
        position: absolute;
        right: 30px;
        bottom: 30px;
        color: #00AAFF;
        cursor: pointer;
    }
}

::v-deep(.packDialog) {
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;

    .el-dialog__header {
        padding: 0;
    }

    .packContent {
        box-sizing: border-box;
        padding: 20px 40px;
        height: 720px;

        .packHead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #E5E5E5;
            padding-bottom: 20px;

            .packName {
                font-size: 22px;
                font-weight: bold;
                color: #212121;
            }

            .packPrice {
                color: #FF6A00;
                font-weight: bold;

                span {
                    font-size: 30px;
                }
            }
        }

        .packBody {
            display: flex;
            justify-content: space-between;
            color: #212121;
        }

        .packLeft {
            width: 38%;

            .packTip {
                font-size: 18px;
                padding: 18px 0;
            }

            .packList {
                .packItem {
                    background-color: #FAFAFA;
                    box-sizing: border-box;
                    padding: 15px 20px;
                    border-radius: 10px;
                    margin-bottom: 20px;
                    cursor: pointer;

                    .groupTop {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .groupName {
                            font-size: 18px;
                        }

                        .groupCount {
                            span {
                                font-size: 18px;
                                padding-left: 8px;
                            }
                        }
                    }

                    .groupbottom {
                        background-color: #F2F2F2;
                        border-radius: 10px;
                        box-sizing: border-box;
                        padding: 10px 20px;
                        margin-top: 15px;
                        margin-bottom: 6px;

                        .groupGoods {
                            display: flex;
                            align-items: center;
                            line-height: 2.4;

                            .goodsName {
                                width: 60%;
                            }

                            .goodsCount {
                                width: 30%;
                                text-align: center;
                                color: #FF6A00;
                            }

                            .goodsunit {
                                width: 10%;
                                text-align: right;
                            }
                        }
                    }
                }

                .packItem:nth-child(1) {
                    background-color: #FFF4BF;

                    .groupbottom {
                        background-color: #FFFBE5;
                    }
                }
            }
        }

        .packRight {
            width: 57%;

            // height: 500px;
            .allocationTip {
                font-size: 18px;
                padding: 18px 0;
                border-bottom: 1px solid #E5E5E5;
            }

            .allocationList {
                display: grid;
                grid-template-columns: repeat(3, 28.5%);
                justify-content: space-between;
                grid-gap: 20px 0;
                padding: 20px 0;
                border-bottom: 1px solid #E5E5E5;

                .allocationItem {
                    background-color: #F2F2F2;
                    text-align: center;
                    padding: 20px 0;
                    border-radius: 10px;
                    border: 1px solid #E6E6E6;
                    cursor: pointer;
                    background-color: #FFE566;
                    border-color: #FFE566;
                }

                // .allocationItem:nth-child(1){
                //     background-color: #FFE566;
                //     border-color: #FFE566;
                // }
                // .allocationItem:nth-child(3){
                //     background-color: #FFE566;
                //     border-color: #FFE566;
                // }
            }

            .allocationTaste {
                .tasteTip {
                    padding: 20px 0;
                }

                .tasteList {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .tasteActive {
                        background-color: #FFE566;
                    }

                    div {
                        background-color: #E6E6E6;
                        min-width: 100px;
                        text-align: center;
                        margin-right: 15px;
                        padding: 12px 20px;
                        border-radius: 6px;
                        margin-bottom: 15px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>